{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}
{% load group_filter %}
{% block title %}智慧众包—维护质检{% endblock title %}
{% block header_tail %}
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
<!-- daterange picker -->
<link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
<!-- bootstrap slider -->
<link rel="stylesheet" href="{% static 'plugins/bootstrap-slider/slider.css' %}">
{% endblock header_tail %}

{% block section_content %}

<div>
    <div class="box-header with-border">
        <h3 class="box-title">
            维护质检
            <button class="btn btn-primary" data-toggle="modal" data-target="#exportMessage">导出维护质检记录</button>
            <a class="btn btn-primary" href="{% url 'configQC:configQC' %}">新增配置质检</a>
        </h3>
    </div>
    <!-- form start -->
    <div class="box box-primary">
        <div class="box-header with-border" style="border-color: #1b6d85">
            <!-- Date range -->
            <form role="form" id="" method="get">
                {% csrf_token %}
                <div style="width: 95%; float: left;">
                    {% for field in form %}
                    <div class="input-group select-config-div" style="float: left; ">
                        <label for="" class="control-label">{{ field.label }}：</label>
                        <p>{{ field }}</p>
                    </div>
                    {% endfor %}
                    <div style="float: left;" class="input-group select-config-div">
                        <label for="id" class="control-label">每页显示：</label>
                        <select name="limit" id="showNumSelect" class="config-input">
                            {% for i in limits %}
                            {% if i == limit %}
                            <option selected="selected" value="{{ i }}">{{ i }}条</option>
                            {% else %}
                            <option value="{{ i }}">{{ i }}条</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="input-group" style="width: 5%; float: left; margin-top: 70px;">
                    <input type="text" class="no-display">
                    <input type="submit" value="检索" class="form-control pull-left btn btn-sm btn-primary">
                </div>
                <p style="clear: both"></p>
                <div class="form-group">
                </div>
            </form>
        </div>
        <!-- 展示搜索出来的任务 -->
        <div id="main">
            <div class="box-body" v-show="showMain">
                <div class="group">
                    <table id="task_each_table" border="1" class="table table-bordered table-hover table-striped">
                        <thead>
                        <tr>
                            {% for head in header %}
                            <th>
                                <span style="float: left">
                                    {{ head }}
                                </span>
                            </th>
                            {% endfor %}
                            <th>
                                <span style="float: left">
                                    頻道
                                </span>
                            </th>
                            <th>
                                <span style="float: left">
                                    操作
                                </span>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        {% if not configs %}
                        <tr>
                            <td colspan="18" style="text-align: center;">暂无数据</td>
                        </tr>
                        {% else%}
                        {% for conf in configs %}
                        <tr id="tr_{{ conf.configid }}">
                            <td class="hd">{{ forloop.counter }}</td>
                            <td class="hd"><a href="http://ispider.istarshine.com/config/{{ conf.configid }}/change/" target="_blank">{{ conf.configid }}</a></td>
                            <td class="hd" title="{{ conf.webname }}">{{ conf.webname|truncatewords:5 }}</td>
                            <td class="hd" title="{{ conf.domain }}">{{ conf.domain }}</td>
                            <td class="hd" title="{{ conf.author }}">{{ conf.author }}</td>
                            <td class="hd" title="修改人">{{ conf.configid | get_updateuser:'user' }}</td>
                            <td class="hd">{{ conf.configgroup | get_group_name }}</td>
                            <td class="hd" title="{{ conf.config_name }}">{{ conf.config_name }}</td>
                            <td class="hd">{{ conf.publishtime | date:'Y-m-d' }}</td>
                            <td class="hd" title="修改时间">{{ conf.configid | get_updateuser:'date' }}</td>

                            {% if conf.datatype|get_webtype_name == '异常' %}
                            <td class="hd" style="color: red">{{ conf.datatype | get_webtype_name }}</td>
                            {% else %}
                            <td class="hd">{{ conf.datatype | get_webtype_name }}</td>
                            {% endif %}

                            {% if conf.industry_type|get_tid_name == '异常' %}
                            <td class="hd" style="color: red">{{ conf.industry_type | get_tid_name }}</td>
                            {% else %}
                            <td class="hd">{{ conf.industry_type | get_tid_name }}</td>
                            {% endif %}

                            {% if conf.language|get_language_name == '异常' %}
                            <td class="hd" style="color: red">{{ conf.language | get_language_name }}</td>
                            {% else %}
                            <td class="hd">{{ conf.language | get_language_name }}</td>
                            {% endif %}

                            {% if conf.country|get_country_name == '异常' %}
                            <td class="hd" style="color: red">{{ conf.country | get_country_name }}</td>
                            {% else %}
                            <td class="hd">{{ conf.country | get_country_name }}</td>
                            {% endif %}

                            {% if conf.isrunning|get_status_name == '未启用' %}
                            <td class="hd" style="color: red">{{ conf.isrunning | get_status_name }}</td>
                            {% else %}
                            <td class="hd">{{ conf.isrunning | get_status_name }}</td>
                            {% endif %}

                            <td class="hd">{{ conf.id | get_parent_class }}</td>

                            <td class="hd">
                                <p class="btn-link channels-tr" style="cursor: pointer" onclick="get_channels('{{ conf.configid }}')">查看频道</p>
                            </td>
                            <td class="btn-group">
                                <a class="btn btn-info btn-xs" onclick="reject('{{ conf.configid }}', '{{ conf.webname }}', '{{ conf.author }}', '{{ conf.config_name }}')">
                                    无频道
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                        {% endif %}
                        </tbody>
                    </table>
                    <p class="" id="paginator">
                        <a class="btn btn-default btn-xs" onclick="toPage('home')">首页</a>
                        <a class="btn btn-default btn-xs" onclick="toPage('last')">上一页</a>
                        <a class="btn btn-default btn-xs" onclick="toPage('next')">下一页</a>
                        <input type="text" id="page-judge" style="width: 30px;height:20px; margin-left: 20px"
                               onkeyup="toPage('judge')">
                        <a class="btn btn-default btn-xs" onclick="toPage('judge')">跳页</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--导出记录-->
<div class="modal fade" id="exportMessage" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" style="top:40%">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="exportMsgBoxMsg" class="modal-body" style="overflow:auto;text-align:center;">
                <form style="margin-top: 10px;" role="form" method="get" action="{% url 'configQC:export_record' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label>维护质检记录导出:</label>
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input name="testTime_range" type="text" class="form-control pull-right reservation"
                                   autocomplete="off" placeholder="2022/01/02 - 2022/02/01">
                            <input type="hidden" name="dtype" value="1">
                        </div>
                    </div>
                    <input type="submit" class="btn btn-primary" value="确定">
                </form>
            </div>
            <div class="modal-footer" style="text-align:center;">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>
<!--频道-->
<div class="modal fade" id="channel_list" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" style="overflow: hidden; ">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #307095;font-weight: bold;">
                <label>频道列表</label>
            </div>
            <div class="modal-body" style="overflow-y: scroll; max-height: 500px;">
                <input type="hidden" value="[[ cid ]]">
                <table id="channel_list_table" border="1" class="table table-bordered table-hover table-striped">
                    <tbody>
                    <tr v-if="channel_list == '' ">
                        <td colspan="5" style="text-align: center;">暂无记录</td>
                    </tr>
                    <template v-for="channel in channel_list">
                        <tr id="channel_[[ cid ]]_[[ $index ]]">
                            <td><a style="cursor:pointer" onclick="toChannelUrl('[[ cid ]]', '[[ channel.channelurl ]]', '[[ channel.channelname ]]', '[[ $index ]]')">[[ channel.channelurl ]]</a></td>
                            <td><span>[[ channel.channelname ]]</span></td>
                        </tr>
                    </template>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" id="btn_close" class="btn btn-default" data-dismiss="modal">
                    确认
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock section_content %}

{% block jquery_js %}
<script src="{% static 'task/vuePublic.js' %}"></script>
<script src="{% static 'task/taskProcess.js' %}"></script>
<!-- date-range-picker -->
<script src="{% static 'plugins/daterangepicker/moment.min.js' %}"></script>
<script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
<!-- Bootstrap slider -->
<script src="{% static 'plugins/bootstrap-slider/bootstrap-slider.js' %}"></script>
<script src="{% static 'plugins/daterangepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
<script>
    Vue.config.delimiters = ["[[", "]]"];
    var ChannelsVue = new Vue({
        el: '#channel_list_table',
        data: {
            channel_list: [],
            cid: '',
            webname: '',
            savename: '',
            author: ''
        }
    });

    function toChannelUrl(cid, channelurl, channelname, inde) {
        $('#channel_' + cid + '_' + inde).css('background', '#00c0ef');
        $.post({
            url: "{% url 'configQC:save_channel_info' %}",
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                cid: cid,
                channel_url: channelurl,
                channel_name: channelname,
                webname: '',
                savename: '',
                author: '',
            },
            success: function (resp) {
                if (resp.message == 'ok') {
                    window.open(channelurl)
                } else {
                    alert(resp.message)
                }
            },
            error: function (err) {
                alert(err)
            }
        })
    }

    // 查看频道
    function get_channels(cid) {
        $('#tr_' + cid).css('background', '#00c0ef');
        $.post({
            url: "{% url 'configQC:get_channels' %}",
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                configid: cid,
            },
            success: function (resp) {
                ChannelsVue.channel_list = resp.channel_list;
                ChannelsVue.cid = cid;
                console.log(resp)
            },
            error: function (err) {
                console.log(err)
            }
        });
        $('#channel_list').modal();
    }

    // 不合格
    function reject(config_id, webname, author, savename) {
        $.ajax(
            {
                url: "{% url 'configQC:save_err' %}",
                type: "POST",
                dataType: "json",
                data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'config_id': config_id,
                    'cvalue': '无频道',
                    'remark': '',
                    'test_url': '',
                    'webname': webname,
                    'author': author,
                    'savename': savename,
                    'ctime': '',
                    'gtime': '',
                    'savetime': '',
                    'channel_url': '',
                    'channel_name': '',
                    'dtype': '1'
                },
                success: function (result) {
                    alert(result.message);
                    window.close();
                },
                error: function (xhr, status, p3, p4) {
                    var err = "Error " + " " + status + " " + p3;
                    if (xhr.responseText && xhr.responseText[0] == "{")
                        err = JSON.parse(xhr.responseText).message;
                    alert(err + '不合格状态修改失败！！！请点击重新修改');
                }
            });
    }

    // 获取当前url参数值
    function GetQueryValue1(queryName) {
        var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURI(r[2]);
        } else {
            return null;
        }
    }

    // 翻页
    function toPage(type) {
        location_url = window.location.href;
        var page_num = GetQueryValue1('page');
        if (!page_num) {
            page_num = 1
        }
        if (type === 'last') {
            if (Number(page_num) > 1) {
                page_num = Number(page_num) - 1
            } else {
                page_num = 1
            }
        } else if (type === 'next') {
            page_num = Number(page_num) + 1
        } else if (type === 'judge') {
            page_num = $("#page-judge").val()
        } else if (type === 'home') {
            page_num = 1
        } else {
            alert('参数错误');
            return false;
        }
        var page = 'page=' + page_num;
        if (location_url.indexOf('page') !== -1) {
            window.location.href = location_url.replace(/page=\d+/, page)
        } else {
            if (location_url.indexOf('?') === -1) {
                window.location.href = location_url + '?' + page
            } else {
                window.location.href = location_url + '&' + page;
            }
        }
    }

    function changeColor(id, color) {
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }

    searchTasks();
    changeColor("#manage", "#00FF7F");
    /* BOOTSTRAP SLIDER */
    $('.slider').slider()

</script>
{% endblock jquery_js %}
